<template>
<van-sticky>
    <van-nav-bar
      title="产品新增"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
  </van-sticky>
  <van-form>
      <!-- 产品名称 -->
      <van-cell-group inset>
        <van-field
          v-model="addObj.p_name"
          label="产品名称"
          :rules="[{ required: true, message: '请填写产品名称' }]"
        />

        <!-- 产品分类 -->
        <van-field
          v-model="addObj.c_name"
          is-link
          readonly
          label="产品分类"
          placeholder="点击选择"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            :columns-field-names="columnsFieldNames"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>

        <!-- 生产日期 -->
        <van-field
          v-model="addObj.p_date"
          is-link
          readonly          
          label="生产日期"
          placeholder="点击选择日期"
          @click="showCalendar = true"
        />
        <van-calendar
          v-model:show="showCalendar"
          @confirm="onConfirmCalendar"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" @click="execAdd" > 提交 </van-button>
      </div>
    </van-form>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter,useRoute } from "vue-router";
import { get, post, put, del, setLocalToken,tip } from "@/common";
const router = useRouter();
const route = useRoute();

const back = () => {
  router.replace("/emp");
};

const addObj = reactive({
  p_name: "",
  c_id:'',
  c_name:'',
  p_date:''
});

console.log(route.query.p_id,"=================p_id");

const addShow = ref(false);
const openAdd = () => {
  addShow.value = true;
};

const columnsFieldNames = { text: "c_name", value: "c_id" };
const showPicker = ref(false);
const columns = ref([]);
get("/info/cls").then((res) => {
  columns.value = res.data;
});

const onConfirm = (value, idx) => {
  addObj.c_id = value.c_id;
  addObj.c_name = value.c_name;
  showPicker.value = false;
};


const showCalendar = ref(false);
const nn = (n)=>{
  return n>9?n:`0${n}`;
};
const onConfirmCalendar = (date) => {
  addObj.p_date = `${date.getFullYear()}-${nn(date.getMonth() + 1)}-${nn(date.getDate())}`;
  showCalendar.value = false;
};

const execAdd = ()=>{
  post("/info/pro",addObj).then((res)=>{
    tip.success('新增员工成功！');
    router.replace('/emp');
  });
};

</script>

<style>

</style>